import React from "react";
import {Button, Flex, Space} from "antd";
import "./VoiceView.css";

export function VoiceView({role, text, paused, setPaused, onPaused}) {
  const handlePauseClick = () => {
    if (!paused && onPaused) {
      onPaused(); // 仅在未暂停时触发
    } else if (setPaused) {
      setPaused(!paused);
    }
  };
  return (
    <Flex vertical style={{height: "100%", width: "100%"}}>
      <Flex flex={1} justify="center" align="center" style={{width: "100%"}}>
        <Space>
          <div style={{fontSize: 20, fontWeight: "bold"}}>{role === "user" ? "你" : "助手"}:</div>
          <div style={{fontSize: 18}}>{text}</div>
        </Space>
      </Flex>
      <Flex justify="center" style={{width: "100%", marginBottom: 32}}>
        <Button type="primary" onClick={handlePauseClick}>
          {paused ? "继续" : "暂停"}
        </Button>
      </Flex>
    </Flex>
  );
}

export default VoiceView;
